﻿<section>
    <div class="panel panel-default" style="margin-bottom: 10px; position: relative; height: 70px">
        <img data-bind="attr: { src: user.profileImage() }" style="width: 64px; height: 64px; position: absolute; top: 2px; left: 2px;" alt="" />
        <div style="margin-left: 75px; margin-top: 36px">
            <h4 data-bind="text: user.name() + ' ' + user.surname()"></h4>
        </div>
    </div>
    <ul class="nav nav-pills" id="UserViewTabs">
        <li><a href="#UserActivities">Activities</a></li>
        <li><a href="#UserCurrentTasks">Current tasks</a></li>
        <li><a href="#UserCompletedTasks">Completed tasks</a></li>
    </ul>
    <div class="tab-content" style="margin-top: 10px;">
        <div class="tab-pane active" id="UserActivities" data-bind="compose: { model: 'viewmodels/userActivityList', activationData: { userId: user.id() } }"></div>
        <div class="tab-pane" id="UserCurrentTasks" data-bind="compose: { model: 'viewmodels/taskList', activationData: { assignedUserId: user.id(), taskStates: [1, 2] } }"></div>
        <div class="tab-pane" id="UserCompletedTasks" data-bind="compose: { model: 'viewmodels/taskList', activationData: { assignedUserId: user.id(), taskStates: [3] } }"></div>
    </div>
</section>
